<template>
  <a-card>
    <div>
      <a-space class="operator">
        <a-button @click="add" type="primary">新建</a-button>
      </a-space>
      <standard-table :loading="loading"
          :rowKey="(data, index) => index"
          :columns="columns"
          :dataSource="farmList"
      >
        <div slot="action" slot-scope="{text, record, index}">
          <a style="margin-right: 8px" @click="editRecard(record, index)">
            <a-icon type="edit"/>编辑
          </a>
          <a-popconfirm title="确定删除?" @confirm="delRecord(record, index)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a href="#" style="margin-right: 8px; color: #f5222d"><a-icon type="delete" />删除</a>
          </a-popconfirm>
        </div>
      </standard-table>
    </div>
    <a-modal
        :title="modalTitle"
        width="900px"
        :visible="visible"
        @ok="confirm"
        @cancel="editCancel">
      <a-form-model
          ref="farmForm"
          :model="data"
          :rules="rules"
          :label-col="{span: 4}"
          :wrapper-col="{span: 14}">
        <a-form-model-item label="园区名称" prop="FarmName">
          <a-input v-model="data.FarmName" type="text" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
  import {list, add, edit, del} from '@/services/farm'
  import { FormModel } from 'ant-design-vue';
  import StandardTable from '@/components/table/StandardTable'
  const columns = [
    {
      title: '园区编号',
      dataIndex: 'FarmId',
      scopedSlots: { customRender: 'FarmId' }
    },
    {
      title: '园区名称',
      dataIndex: 'FarmName',
      scopedSlots: { customRender: 'FarmName' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    name: 'FarmIndex',
    components: {
      StandardTable,
      FormModel
    },
    data () {
      return {
        loading: false,
        visible: false,
        modalTitle: '',
        columns: columns,
        farmList: [],
        dataIndex: null,
        data: {
          FarmId: '',
          FarmName: ''
        },
        rules: {
          FarmName: [
            { required: true, message: '请输入园区名称', trigger: 'blur' },
          ],
        }
      }
    },
    created() {
      this.getFarmList()
    },
    mounted() {
      this.$on('change', pagination => {
        console.log(pagination);
      })
    },
    methods: {
      async getFarmList() {
        this.loading = true
        let res = await list()
        this.farmList = res.Data
        this.loading = false
      },
      editRecard(row, index) {
        this.dataIndex = index
        this.data = {...row}
        this.modalTitle = '编辑园区'
        this.visible = true
      },
      delRecord(row, index) {
        console.log(row);
        if(!row.FarmId) {
          this.$message.error('无效园区')
          return
        }
        console.log(index);
        del(row.FarmId).then(res => {
          if(res.Code == 0) {
            this.$message.success("删除成功")
            this.getFarmList() //不用下标，重新获取
          } else this.$message.error("删除失败")
        }).catch(err => {
          console.log(err);
          this.$message.error("删除失败")
        })
      },
      add() {
        this.visible = true
        this.modalTitle = '新建园区'
      },
      confirm() {
        this.$refs.farmForm.validate(valid => {
          if (valid) {
            if(this.data.FarmId == '') {
              //新增
              this.data.FarmId = 0
              add(this.data).then(res => {
                if(res.Code == 0) {
                  this.$message.success("创建成功")
                  // this.farmList.unshift({
                  //   FarmId: res.Data.FarmId,
                  //   FarmName: res.Data.FarmName
                  // })
                  this.getFarmList() //不用下标，重新获取
                  this.data = this.$options.data().data
                } else this.$message.error("创建失败")
              }).catch(err => {
                console.log(err)
                this.$message.error("创建失败")
              })
            } else {
              //编辑
              edit(this.data).then(res => {
                if(res.Code == 0) {
                  this.$message.success("编辑成功")
                  // this.farmList[this.dataIndex].FarmName = this.data.FarmName
                  this.getFarmList() //不用下标，重新获取
                  this.data = this.$options.data().data
                } else this.$message.error("编辑失败")
              }).catch(err => {
                console.log(err)
                this.$message.error("编辑失败")
              })
            }
            this.visible = false
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      editCancel() {
        this.visible = false
        this.data = this.$options.data().data
        this.$refs.farmForm.resetFields();
      }
    }
  }
</script>

<style lang="less" scoped>
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
